<template>
  <div class="draw-list-container">
    <div class="header">
      <h2>转盘奖励列表</h2>
    </div>

    <el-table v-loading="loading" :data="prizeList" style="width: 100%" border>
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column label="奖品信息" width="auto">
        <template slot-scope="scope">
          <div class="prize-info">
            <img :src="scope.row.icon" alt="奖品图标" class="prize-icon" />
            <div class="prize-details">
              <div>{{ scope.row.prize_name }}</div>
              <div v-if="scope.row.prize_title">{{ scope.row.prize_title }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="probability" label="中奖概率" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.probability * 100 }}</span>%
        </template>
      </el-table-column>
      <el-table-column prop="prize_type" label="奖品类型" width="120">
        <template slot-scope="scope">
          <span>{{ formatPrizeType(scope.row.prize_type) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="value" label="奖品价值" width="120" />
      <!-- <el-table-column prop="daily_limit" label="每日限额" width="120" /> -->
      <!-- <el-table-column prop="total_limit" label="总限额" width="120" /> -->
      <!-- <el-table-column prop="is_active" label="是否激活" width="120">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.is_active" :active-value="1" :inactive-value="0" @change="handleStatusChange(scope.row)" />
        </template>
      </el-table-column> -->
      <el-table-column prop="sort_order" label="排序" width="200" />
      <el-table-column prop="created_at" label="创建时间" width="180" />
      <!-- <el-table-column label="操作" width="150" align="center">
        <template slot-scope="scope">
          <el-button type="primary" size="small" @click="editPrize(scope.row)">编辑</el-button>
          <el-button type="danger" size="small" @click="deletePrize(scope.row.id)" style="margin-left: 10px;">删除</el-button>
        </template>
      </el-table-column> -->
    </el-table>

    <div class="pagination-container">
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination> -->
    </div>

    <!-- 编辑奖品对话框 -->
    <el-dialog title="编辑奖品" :visible.sync="dialogVisible" width="50%">
      <el-form :model="prizeForm" label-width="120px">
        <el-form-item label="奖品名称">
          <el-input v-model="prizeForm.prize_name"></el-input>
        </el-form-item>
        <el-form-item label="奖品标题">
          <el-input v-model="prizeForm.prize_title"></el-input>
        </el-form-item>
        <el-form-item label="奖品图标">
          <el-input v-model="prizeForm.icon"></el-input>
        </el-form-item>
        <el-form-item label="中奖概率">
          <el-input v-model="prizeForm.probability" placeholder="例如: 0.1000 表示10%"></el-input>
        </el-form-item>
        <el-form-item label="奖品类型">
          <el-select v-model="prizeForm.prize_type" placeholder="请选择奖品类型">
            <el-option value="thanks" label="谢谢参与"></el-option>
            <el-option value="coupon" label="优惠券"></el-option>
            <el-option value="points" label="球钻"></el-option>
            <el-option value="physical" label="实物"></el-option>
            <!-- 可以根据实际需求添加更多类型 -->
          </el-select>
        </el-form-item>
        <el-form-item label="奖品价值">
          <el-input v-model="prizeForm.value"></el-input>
        </el-form-item>
        <el-form-item label="每日限额">
          <el-input v-model="prizeForm.daily_limit" type="number"></el-input>
        </el-form-item>
        <el-form-item label="总限额">
          <el-input v-model="prizeForm.total_limit" type="number"></el-input>
        </el-form-item>
        <el-form-item label="是否激活">
          <el-switch v-model="prizeForm.is_active" :active-value="1" :inactive-value="0"></el-switch>
        </el-form-item>
        <el-form-item label="排序">
          <el-input v-model="prizeForm.sort_order" type="number"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="savePrize">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// 假设API接口在libs/api.js中
import { getPrizeList, updatePrize, deletePrize } from '../../../libs/api';

export default {
  name: 'DrawList',
  data() {
    return {
      prizeList: [],
      total: 0,
      currentPage: 1,
      pageSize: 15,
      loading: false,
      dialogVisible: false,
      prizeForm: {
        id: '',
        prize_name: '',
        prize_title: '',
        icon: '',
        probability: '',
        prize_type: '',
        value: '',
        daily_limit: 0,
        total_limit: 0,
        if_appoint: 2,
        sort_order: 0,
        is_active: 1
      }
    };
  },
  created() {
    this.fetchData();
  },
  methods: {
    // 获取奖品列表
    fetchData() {
      this.loading = true;
      const params = {
        page: this.currentPage,
        per_page: this.pageSize
      };

      getPrizeList(params)
        .then(res => {
            console.log(res.data)
          this.prizeList = res.data;
          this.total = res.data;
          this.loading = false;
        })
        .catch(err => {
          console.error('获取奖品列表失败:', err);
          this.loading = false;
        });
    },

    // 格式化奖品类型
    formatPrizeType(type) {
      const typeMap = {
        'thanks': '谢谢参与',
        'coupon': '优惠券',
        'points': '球钻',
        'physical': '实物'
        // 可以根据实际需求添加更多类型映射
      };
      return typeMap[type] || type;
    },

    // 编辑奖品
    editPrize(row) {
      this.prizeForm = { ...row };
      this.dialogVisible = true;
    },

    // 保存奖品修改
    savePrize() {
      updatePrize(this.prizeForm)
        .then(res => {
          this.$message.success('修改成功');
          this.dialogVisible = false;
          this.fetchData();
        })
        .catch(err => {
          this.$message.error('修改失败');
        });
    },

    // 删除奖品
    deletePrize(id) {
      this.$confirm('确定要删除这个奖品吗?', '提示', {
        type: 'warning'
      }).then(() => {
        deletePrize(id)
          .then(res => {
            this.$message.success('删除成功');
            this.fetchData();
          })
          .catch(err => {
            this.$message.error('删除失败');
          });
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },

    // 处理状态变更
    handleStatusChange(row) {
      updatePrize({ id: row.id, is_active: row.is_active })
        .then(res => {
          this.$message.success('状态更新成功');
        })
        .catch(err => {
          this.$message.error('状态更新失败');
          // 恢复原来的状态
          row.is_active = row.is_active === 1 ? 0 : 1;
        });
    },

    // 分页相关方法
    handleSizeChange(size) {
      this.pageSize = size;
      this.fetchData();
    },

    handleCurrentChange(current) {
      this.currentPage = current;
      this.fetchData();
    }
  }
};
</script>

<style scoped>
.draw-list-container {
  padding: 20px;
}

.header {
  margin-bottom: 20px;
}

.prize-info {
  display: flex;
  align-items: center;
}

.prize-icon {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  margin-right: 10px;
}

.prize-details {
  display: flex;
  flex-direction: column;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>